import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/widgets/appbar/common_app_bar.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_base/widgets/textfield/custom_text_field.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'search_logic.dart';

class SearchPage extends StatelessWidget {
  final logic = Get.put(SearchLogic());

  SearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<SearchLogic>(
      appBar: null,
      builder: (_) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildCustomSearchBar(),
            SizedBox(height: 20.w),
            _buildHistoryHeader(),
            SizedBox(height: 16.w),
            Expanded(
              child: Obx(() => _buildHistoryList()),
            ),
          ],
        );
      },
    );
  }

  // 构建自定义搜索导航栏
  Widget _buildCustomSearchBar() {
    return Container(
      padding: EdgeInsets.only(
        top: MediaQuery.of(Get.context!).padding.top,
        bottom: 10.w,
      ),
      color: Colors.white,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Row(
          children: [
            GestureDetector(
              onTap: () => Get.back(),
              child: Container(
                width: 24.w,
                height: 24.w,
                alignment: Alignment.center,
                child: AutoImage(
                  Assets.arrowBackWhite,
                  width: 24.w,
                  height: 24.w,
                  color: AppColor.color0C0A09,
                ),
              ),
            ),
            SizedBox(width: 8.w),
            Expanded(
              child: _buildSearchInput(),
            ),
            SizedBox(width: 8.w),
            GestureDetector(
              onTap: () {
                logic.doSearch(logic.searchController.text);
              },
              child: Text(
                'Search',
                style: TextStyle(
                  fontFamily: 'Outfit',
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                  color: AppColor.color0C0A09,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  // 构建搜索输入框
  Widget _buildSearchInput() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(40.w),
        border: Border.all(color: AppColor.primary, width: 1.w),
      ),
      height: 44.w,
      child: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 12.w, right: 8.w),
            child: AutoImage(
              Assets.homeTopSearch,
              width: 19.w,
              height: 19.w,
              color: AppColor.primary,
            ),
          ),
          Container(
            width: 2.w,
            height: 24.w,
            color: AppColor.primary,
            margin: EdgeInsets.symmetric(horizontal: 8.w),
          ),
          Expanded(
            child: TextField(
              controller: logic.searchController,
              focusNode: logic.searchFocusNode,
              decoration: InputDecoration(
                hintText: 'Search Test Questions',
                border: InputBorder.none,
                hintStyle: TextStyle(
                  fontFamily: 'Outfit',
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                  color: AppColor.color0C0A09.withOpacity(0.16),
                ),
                contentPadding: EdgeInsets.zero,
              ),
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: AppColor.color0C0A09,
              ),
              textInputAction: TextInputAction.search,
              onSubmitted: (value) {
                logic.doSearch(value);
              },
            ),
          ),
          Obx(
            () => logic.showClear.value
                ? GestureDetector(
                    onTap: logic.clearSearchInput,
                    child: Padding(
                      padding: EdgeInsets.only(left: 8.w, right: 12.w),
                      child: Icon(
                        Icons.close,
                        size: 20.w,
                        color: AppColor.color999999,
                      ),
                    ),
                  )
                : SizedBox(width: 12.w),
          ),
        ],
      ),
    );
  }

  // 构建历史记录标题
  Widget _buildHistoryHeader() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '历史搜索',
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: AppColor.color0C0A09,
            ),
          ),
          Obx(
            () => logic.searchHistory.isNotEmpty
                ? GestureDetector(
                    onTap: logic.clearSearchHistory,
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          Icons.delete_outline,
                          size: 16.w,
                          color: AppColor.color0C0A09,
                        ),
                        SizedBox(width: 4.w),
                        Text(
                          '清空',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w500,
                            color: AppColor.color999999,
                          ),
                        ),
                      ],
                    ),
                  )
                : SizedBox(),
          ),
        ],
      ),
    );
  }

  // 构建历史记录列表
  Widget _buildHistoryList() {
    if (logic.searchHistory.isEmpty) {
      return Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.history,
              size: 48.w,
              color: AppColor.colorCCCCCC,
            ),
            SizedBox(height: 12.w),
            Text(
              '暂无搜索历史',
              style: TextStyle(
                fontSize: 14.sp,
                color: AppColor.color999999,
              ),
            ),
          ],
        ),
      );
    }

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Wrap(
        spacing: 12.w,
        runSpacing: 12.w,
        children: logic.searchHistory.map((keyword) {
          return _buildHistoryItem(keyword);
        }).toList(),
      ),
    );
  }

  // 构建历史记录项
  Widget _buildHistoryItem(String keyword) {
    return GestureDetector(
      onTap: () => logic.onHistoryItemTap(keyword),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.w),
        decoration: BoxDecoration(
          color: AppColor.colorF5F5F5,
          borderRadius: BorderRadius.circular(20.w),
          border: Border.all(
            color: AppColor.color0C0A09.withOpacity(0.16),
            width: 1.w,
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.history,
              size: 16.w,
              color: AppColor.color0C0A09,
            ),
            SizedBox(width: 6.w),
            Text(
              keyword,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w500,
                color: AppColor.color0C0A09,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
